<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link href="https://cdn.bootcss.com/materialize/1.0.0-alpha.1/css/materialize.min.css" rel="stylesheet">
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<!--<a href="/login.html">登录</a>-->

<!--<br/>-->
<!--<ul id="students">-->
<!--</ul>-->

<!--<div id="btns"></div>-->
<div id="app">

    <nav>
        <div class="nav-wrapper">
            <a href="#" class="brand-logo">Logo</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li v-if="!user"><a href="/login.html">Login</a></li>
                <li v-else>欢迎</li>
            </ul>
        </div>
    </nav>

    <div id="content" class="container">
        <table id="students" class="centered striped">
            <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>政治面貌</th>
                <th>地址</th>
                <th>宿舍号</th>
                <th>联系电话</th>
                <th v-if="user">操作</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="item in students">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.birthday}}</td>
                <td>{{item.politicalstatus}}</td>
                <td>{{item.address}}</td>
                <td>{{item.dormnum}}</td>
                <td>{{item.phone}}</td>
                <td v-if="user">
                    <button class="waves-effect waves-light btn" v-on:click="editStudent(item.id)">修改</button>
                    <button class="waves-effect waves-light btn" v-on:click="deleteStudent(item.id)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>

        <a class="waves-effect waves-light btn" v-if="user" v-on:click="addStudent()">添加学生</a>
    </div>

    <!-- Modal Trigger -->
    <!--<a class="modal-trigger waves-effect waves-light btn" href="#modal1">模态</a>-->
    <!-- Modal Structure -->
    <div id="modal-add-student" class="modal modal-fixed-footer">
        <div class="modal-content">
            <h4 v-if="modalMode == 'add'">添加学生</h4>
            <h4 v-else>修改学生</h4>
            <!--<p>一堆文本</p>-->
            <div class="row">
                <form class="col s12" id="frm-add-student">
                    
                    <!--<div class="row" v-if="modalMode == 'add'">-->
                    <div class="row" v-bind:class="{hidden: modalMode == 'update'}">
                        <div class="input-field col s12">
                            <input id="id" type="text" name="id">
                            <label for="id">学号</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="name" type="text" name="name">
                            <label for="name">姓名</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="sex" type="text" name="sex">
                            <label for="sex">性别</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="birthday" value="1999-09-09 09:09:09" type="text" name="birthday">
                            <label for="birthday">生日</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="politicalstatus" type="text" name="politicalstatus">
                            <label for="politicalstatus">政治面貌</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="address" type="text" name="address">
                            <label for="address">家庭住址</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="dormnum" placeholder="请输入数字" type="text" name="dormnum">
                            <label for="dormnum">宿舍号</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="phone" placeholder="请输入数字" type="text" name="phone">
                            <label for="phone">电话号码</label>
                        </div>
                    </div>
                    
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <a v-if="modalMode == 'add'" v-on:click="confirmAddStudent()" class="modal-action modal-close waves-effect waves-green btn-flat ">添加</a>
            <a v-else v-on:click="confirmUpdateStudent()" class="modal-action modal-close waves-effect waves-green btn-flat ">修改</a>
        </div>
    </div>

    <div id="modal-delete-student" class="modal modal-fixed-footer">
        <div class="modal-content">
            <h4>确认删除</h4>
        <div class="modal-footer">
            <a v-on:click="confirmDeleteStudent()" class="modal-action modal-close waves-effect waves-green btn-flat ">OK</a>
            <a v-on:click="$('#modal-delete-student').modal('close')" class="modal-action modal-close waves-effect waves-green btn-flat ">取消</a>
        </div>
    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/materialize/1.0.0-alpha.1/js/materialize.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            user: false,
            students: [],
            modalMode: 'add',//Mode: add or update
            deleteId: '0',
        },
        methods: {
            getHomeInfo() {
                $.ajax({
                    url: '/student/list',
                }).then(res => {//Set this.students
                    res = JSON.parse(res)
                    this.students = res.data
                    return res
                }).then(res => {//Set this.user
                    this.user = (res.user != null)
                    return res
                })
            },
            deleteStudent(id) {
                console.log("I want to delete student: " + id)
                this.deleteId = id
                this.confirmDeleteStudent()
                //$('#modal-delete-student').modal('open')
            },
            editStudent(id) {
                console.log("id: " + id)

                var student = this.findStudent(id)

                console.log('I want to edit: ' + JSON.stringify(student))

                $('#modal-add-student').modal('open')

                //Fill form
                for(var param in student){
                    $('#'+param).val(student[param])
                }

                //Change to update form
                this.modalMode = 'update'
            },
            findStudent(id){
                for(var item of this.students){
                    if(item.id == id){
                        return item
                    }
                }
                return null
            },
            addStudent() {
                console.log("I want to add student")
                $('#modal-add-student').modal('open')

                //Change mode
                this.modalMode = 'add'
            },
            confirmAddStudent(){
                $.ajax({
                    method: 'POST',
                    url: '/student/add',
                    data: $('#frm-add-student').serialize(),
                }).then(response => {
                    var res = JSON.parse(response)
                    if(res.result == 'success'){
                        alert('添加学生成功')
                        this.getHomeInfo()
                    }else{
                        alert('添加学生失败')
                    }
                },err => {
                    alert('服务器响应失败')
                })
            },
            confirmUpdateStudent(){
                var data = $('#frm-add-student').serializeArray()
                data['id'] = $('#id').val()

                $.ajax({
                    method: 'POST',
                    url: '/student/update',
                    data: data,
                }).then(response => {
                    var res = JSON.parse(response)
                    if(res.result == 'success'){
                        alert('更新学生成功')
                        this.getHomeInfo()
                    }else{
                        alert('更新学生失败')
                    }
                },err => {
                    alert('服务器响应失败')
                })
            },
            confirmDeleteStudent(){
                $.ajax({
                    method: 'POST',
                    url: '/student/delete',
                    data: {id: this.deleteId},
                }).then(response => {
                    var res = JSON.parse(response)
                    if(res.result == 'success'){
                        alert('删除学生成功')
                        this.getHomeInfo()
                    }else{
                        alert('删除学生失败')
                    }
                },err => {
                    alert('服务器响应失败')
                })
            }
        },
        mounted: function () {
            this.getHomeInfo()

            //Init modals
            $('.modal').modal()
        }
    })

</script>
</body>
</html>